@import utils.bacteriaData
@(row: bacteriaData)(implicit session: Session)
@data.main("详细信息") {

    <link rel="stylesheet" media="screen" href="@routes.Assets.at("fancybox/jquery.fancybox.css")">
    <script src="@routes.Assets.at("fancybox/jquery.fancybox.js")" type="text/javascript"></script>

    <style>
            th {
                width: 20%;
            }

            table {
                table-layout: fixed;
                word-wrap: break-word;
            }

            .seq {
                height: 150px;
                overflow: auto;
                padding-right: 25px;
                font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
            }

            .self-btn {
                background-color: white;
                border: none;
            }

            .self-btn:hover {
                background-color: transparent;
            }

            .revamp {
                background-color: transparent;
                border: 0px;
                font-size: 15px;
                float: right;
                margin-right: -8px;
                margin-bottom: -16px;
                opacity: 0.9;
                color: white;
            }

            .revamp:hover {
                color: red;
            }



    </style>

    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li>
                <b style="font-size: 20px;">详细信息</b>
            </li>
        </ul>
    </div>


    <div class="row-fluid">

        <div class="row">

            <div class="col-md-12 col-sm-12">
                <div class="portlet blue-soft box">

                    <div class="portlet-title">
                        <div class="caption">
                            菌种详细信息
                        </div>
                    </div>

                    <div class="portlet-body">

                        <table class="table table-bordered">
                            <tbody>
                                <tr>
                                    <th>编号</th>
                                    <td>@row.number</td>

                                    <th>菌株名称首字母</th>
                                    <td>@row.initials</td>
                                </tr>

                                <tr>
                                    <th>甘油管保藏位置</th>
                                    <td>@row.glycerinPosition</td>

                                    <th>安瓿管保藏位置</th>
                                    <td>@row.ampoulePosition</td>
                                </tr>

                                <tr>
                                    <th>保藏形式</th>
                                    <td>@row.preservedForm</td>

                                    <th>实验室原始编号（或命名）</th>
                                    <td>@row.labNumber</td>
                                </tr>

                                <tr>
                                    <th>菌株名称（中文）</th>
                                    <td>@row.bacteriaNameCh</td>

                                    <th>菌株名称（英文）</th>
                                    <td>@row.bacteriaNameEn</td>
                                </tr>

                                <tr>
                                    <th>抗性及浓度</th>
                                    <td>@row.resAndCon</td>

                                    <th>培养基</th>
                                    <td>@row.cultureMedium</td>
                                </tr>

                                <tr>
                                    <th>培养条件（耗/厌氧，培养温度，转速）</th>
                                    <td>@row.cultureCondition</td>

                                    <th>来源</th>
                                    <td>@row.source</td>
                                </tr>

                                <tr>
                                    <th>应用</th>
                                    <td>@row.apply</td>

                                    <th>引用文献</th>
                                    <td>@row.worksCited</td>
                                </tr>

                                <tr>
                                    <th>保藏人</th>
                                    <td>@row.preservedPeople</td>

                                    <th>指导老师</th>
                                    <td>@row.teacher</td>
                                </tr>

                                <tr>
                                    <th>保藏日期</th>
                                    <td>@row.preservedDate</td>

                                    <th>是否保密</th>
                                    <td>@row.isSercet</td>
                                </tr>

                                <tr>
                                    <th>引物序列</th>
                                    <td colspan="3">@row.primerSeq</td>
                                </tr>

                                <tr>
                                    <th>16S 序列</th>
                                    <td colspan="3">
                                        <div class="seq">
                                        @row.seq16s
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th>18S 序列</th>
                                    <td colspan="3">
                                        <div class="seq">
                                        @row.seq18s
                                        </div>

                                    </td>
                                </tr>

                                <tr>
                                    <th>序列索引号</th>
                                    <td colspan="3">@row.seqIndex</td>
                                </tr>

                                <tr>
                                    <th>菌种形态图</th>
                                    <td colspan="3">
                                        <table id="bTable">
                                        </table>
                                        <button type="button" class="btn btn-primary" data-toggle="modal"
                                        data-target="#bacteriaImage" style="margin-top: 10px"><i class="fa fa-plus"></i></button>

                                    </td>
                                </tr>

                                <tr>
                                    <th>电镜照片</th>
                                    <td colspan="3">
                                        <table id="eTable">
                                        </table>
                                        <button type="button" class="btn btn-primary" data-toggle="modal"
                                        data-target="#eleImage" style="margin-top: 10px"><i class="fa fa-plus"></i></button>

                                    </td>
                                </tr>

                                <tr>
                                    <th>安瓿管数量</th>
                                    <td>@row.ampouleNums</td>

                                    <th>甘油管备注</th>
                                    <td>@row.glycerinNotes</td>
                                </tr>

                                <tr><th colspan="4" style="color: red;
                                    border-left: 1px solid transparent;
                                    border-right: 1px solid transparent;">备注</th></tr>

                                <tr>
                                    <th>是否基因改造</th>
                                    <td>@row.isGmo</td>

                                    <th>内包含质粒名称</th>
                                    <td>@row.goverName</td>
                                </tr>

                                <tr>
                                    <th>酶切位点/应用</th>
                                    <td>@row.ggcc</td>

                                    <th>引物</th>
                                    <td>@row.primer</td>
                                </tr>

                                <tr>
                                    <th>长度</th>
                                    <td>@row.length</td>

                                    <th>改造序列</th>
                                    <td>
                                        <div class="seq">
                                        @row.tranSeq
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th>敲除基因名称</th>
                                    <td>@row.outName</td>

                                    <th>敲除后片段序列</th>
                                    <td>
                                        <div class="seq">
                                        @row.outSeq
                                        </div>
                                    </td>
                                </tr>


                            </tbody>

                        </table>


                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="bacteriaImage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
    style="margin-top: 150px;">
        <div class="modal-dialog" style="width: 50%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加菌种形态图
                    </h4>
                </div>

                <form id="bacteriaForm" accept-charset="UTF-8" >

                    <div class="modal-body form-group">
                        <input type="file" name="image" class="file" data-show-preview="false"
                        data-show-upload="false" data-browse-label="选择" data-remove-label="移除">
                    </div>

                    <div class="modal-footer form-group">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary" onclick="UploadImage(this)" value="bacteria">
                            上传
                        </button>
                    </div>
                </form>

            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <div class="modal fade" id="eleImage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
    style="margin-top: 150px;">
        <div class="modal-dialog" style="width: 50%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加电镜照片
                    </h4>
                </div>
                <form id="eleForm" accept-charset="UTF-8" >

                    <div class="modal-body form-group">
                        <input type="file" name="image" class="file" data-show-preview="false"
                        data-show-upload="false" data-browse-label="选择" data-remove-label="移除">
                    </div>
                    <div class="modal-footer form-group">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary" onclick="UploadImage(this)" value="ele">
                            上传
                        </button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <script>

            $(function () {


                $.ajax({
                    url: "/bacteria/sample/getBacteriaImage?id=" + @row.number +"&types=bacteria",
                    type: "post",
                    success: function (data) {

                        $("#bTable").bootstrapTable({
                            data: data,
                            showHeader: false,
                            formatNoMatches: function () {
                                return "没有照片，请上传！";
                            },
                            formatLoadingMessage: function () {
                                return "请稍等，正在加载中。。。";
                            },
                            columns: [{
                                field: "q0",
                                formatter: function (value) {
                                    return getImage(value, 1);
                                }
                            }, {
                                field: "q1",
                                formatter: function (value) {
                                    return getImage(value, 1);
                                }
                            }, {
                                field: "q2",
                                formatter: function (value) {
                                    return getImage(value, 1);
                                }
                            }, {
                                field: "q3",
                                formatter: function (value) {
                                    return getImage(value, 1);
                                }
                            }, {
                                field: "q4",
                                formatter: function (value) {
                                    return getImage(value, 1);
                                }
                            }
                            ]
                        })
                    }

                });

                $.ajax({
                    url: "/bacteria/sample/getBacteriaImage?id=" + @row.number +"&types=ele",
                    type: "post",
                    success: function (data) {

                        $("#eTable").bootstrapTable({
                            data: data,
                            showHeader: false,
                            formatNoMatches: function () {
                                return "没有照片，请上传！";
                            },
                            formatLoadingMessage: function () {
                                return "请稍等，正在加载中。。。";
                            },
                            columns: [{
                                field: "q0",
                                formatter: function (value) {
                                    return getImage(value, 2);
                                }
                            }, {
                                field: "q1",
                                formatter: function (value) {
                                    return getImage(value, 2);
                                }
                            }, {
                                field: "q2",
                                formatter: function (value) {
                                    return getImage(value, 2);
                                }
                            }, {
                                field: "q3",
                                formatter: function (value) {
                                    return getImage(value, 2);
                                }
                            }, {
                                field: "q4",
                                formatter: function (value) {
                                    return getImage(value, 2);
                                }
                            }
                            ]
                        })

                    }

                });


                formValidation();
            });

            function formValidation() {
                $('#bacteriaForm').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        image: {
                            validators: {
                                notEmpty: {
                                    message: '请选择一个图片文件！'
                                },
                                file: {
                                    extension: 'jpg,jpeg,png',
                                    maxSize: 1024 * 1024 * 10,
                                    message: '只支持10M以下jpg,png图片！'
                                }
                            }
                        }
                    }
                });
                $('#eleForm').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        image: {
                            validators: {
                                notEmpty: {
                                    message: '请选择一个图片文件！'
                                },
                                file: {
                                    extension: 'jpg,jpeg,png',
                                    maxSize: 1024 * 1024 * 10,
                                    message: '只支持10M以下jpg,png图片！'
                                }
                            }
                        }
                    }
                });
            }


            function  getImage(value, group) {
                var de;
                if (typeof(value) == "undefined") {
                    de = "";
                } else {
                    var max = value.split("_min")[0] + value.split("_min")[1];
                    var name;
                    if (group == 1) {
                        name = "bacteria"
                    } else {
                        name = "ele"
                    }

                    var path = @row.number +"/" + name + "/" + value;

                    de = "<button class='revamp' onclick='deleteImage(this)' value='" + path + "'><i class='fa fa-times'></i></button>\n" +
                            "<a data-fancybox='group" + group + "' href='/bacteria/utils/getImageByPhotoId?id=" + @row.number +"&name=/" + name + "/" + max + "'>\n" +
                            "<img src='/bacteria/utils/getImageByPhotoId?id=" + @row.number +"&name=/" + name + "/" + value + "' width='100%' height='156px'>\n" +
                            "</a>";
                }

                return de;
            }

            function reloadBImage() {
                $.ajax({
                    url: "/bacteria/sample/getBacteriaImage?id=" + @row.number +"&types=bacteria",
                    type: "post",
                    success: function (data) {
                        $("#bTable").bootstrapTable("load", data);
                    }
                })
            }

            function reloadEImage() {
                $.ajax({
                    url: "/bacteria/sample/getBacteriaImage?id=" + @row.number +"&types=ele",
                    type: "post",
                    success: function (data) {
                        $("#eTable").bootstrapTable("load", data);
                    }
                })
            }

            function deleteImage(obj) {
                swal({
                    title: "删除图片？",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: '确认删除!',
                    cancelButtonText: "取消",
                    closeOnConfirm: false
                }, function () {
                    var v = obj.value;
                    $.ajax({
                        url: "/bacteria/sample/deleteImage?path=" + v,
                        type: "delete",
                        success: function () {
                            swal({
                                title: "\n",
                                text: "删除成功！",
                                type: "success"
                            }, function () {
                                if (v.indexOf("ele") != -1) {
                                    reloadEImage()
                                } else {
                                    reloadBImage()
                                }
                            })
                        }
                    })
                })
            }

            function UploadImage(obj) {
                var date = new Date();
                time = date.getTime();

                var types = obj.value;
                var formId = "#" + types + "Form";

                var form = $(formId);
                var fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    $("#" + types + "Image").modal("hide");
                    var element = "<div id='content'><span id='info'>图片上传中： </span><span id='progress'></span></div>";
                    var index = layer.msg(element, {
                        icon: 16
                        , shade: 0.01,
                        time: 20000000
                    });
                    $.ajax({
                        url: "/bacteria/sample/uploadImage?id=" + @row.number +"&types=" + types,
                        type: "post",
                        processData: false,
                        contentType: false,
                        data: new FormData($(formId)[0]),
                        xhr: function () { //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数

                            myXhr = $.ajaxSettings.xhr();
                            if (myXhr.upload) { //检查upload属性是否存在
                                //绑定progress事件的回调函数
                                myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
                            }
                            return myXhr; //xhr对象返回给jQuery使用
                        },
                        success: function () {
                            layer.close(index);
                            swal({
                                title: "成功！",
                                text: "图片上传成功！",
                                type: "success"
                            }, function () {
                                console.log(types == "bacteria")
                                if (types == "bacteria") {
                                    reloadBImage();
                                } else {
                                    reloadEImage();
                                }
                            })

                        }
                    })
                }
            }


    </script>


}